<template>
	<view>
		<!-- 头部 -->
		<view class="header">
			<view class="header-left">
				<input type="text" placeholder="搜索用户/群" @input="searchKey"/>
				<image src="../../static/image/search/search.png"></image>
			</view>
			<view class="header-right">
				<view class="header_add">
					<text @click="backIndex">取消</text>
				</view>
			</view>
		</view>
		
		<!-- 搜索到的用户 -->
		<view class="search-user">
			<view class="user-title" v-if="userarr.length!==0">用户</view>
			<!-- 用户个体 -->
			<view class="user-content" v-for="item in userarr" :key="item.id">
				<!-- 用户头像 -->
				<view class="user-titles">
					<image :src="'../../static/image/test-img/'+ item.imgurl"></image>
				</view>
				<!-- 用户名字与邮箱 -->
				<view class="user-wrap">
					<view class="user-name" v-html="item.name"></view>
					<view class="user-email" v-html="item.email"></view>
				</view>
				<!-- 右侧区域 -->
				<view class="usre-status" :class="{'user-status-addfriends':item.moTip==1}">
					<text v-if="item.moTip == 1">加好友</text>
					<text v-else>发消息</text>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import datas from '../../common/js/datas.js'
	export default {
		data() {
			return {
				userarr:[]
			}
		},
		methods: {
			// input框的实时搜索
			searchKey(e){
				this.userarr = []
				let searchVal = e.detail.value
				// 空的时候不拿全部
				if(searchVal.length > 0 ){
					this.Filtering(searchVal)
				}
			},
			// 进行 datas.friends 的数组筛选
			Filtering(e){
				let arr = datas.friends();	
				// 正则匹配颜色字
				let exp = eval("/"+e+"/g")
				for(let i of arr){
					// 匹配到
					if(i.name.search(e) != -1 || i.email.search(e) != -1){
						this.isFriends(i)
						i.name = i.name.replace(exp,"<span style='color:#4AAAFF'>"+e+"</span>")
						i.email = i.email.replace(exp,"<span style='color:#4AAAFF'>"+e+"</span>")
						this.userarr.push(i)
					}
				}
			},
			isFriends(e){
				let moTip = 0 ;
				let arr = datas.isFriends()
				for(let i of arr ){
					if(i.friendId === e.id){
						moTip = 1
					}
				}
				e.moTip = moTip
			},
			backIndex(){
				uni.navigateBack({
					delta:1
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.header{
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 750rpx;
		height: 88rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 1rpx 0rpx 0rpx rgba(0,0,0,0.11);
		padding: 14rpx 32rpx;
		box-sizing: border-box;
		.header-left{
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 600rpx;
			height: 60rpx;
			background: #F3F4FF;
			border-radius: 10rpx;
			padding: 12rpx;
			box-sizing: border-box;
			input{
				width: 500rpx;
			}
			image{
				width: 40rpx;
				height: 40rpx;
			}
		}
		.header-right{
			.header_add{
				text{
					width: 56rpx;
					height: 40rpx;
					font-family: PingFangSC-Regular;
					font-size: 28rpx;
					color: #272832;
					letter-spacing: -0.96rpx;
					font-weight: 400;
				}
			}
		}
	}

	.search-user{
		padding: 34rpx 32rpx;
		// background-color: #3F536E;
		.user-title{
			font-size: 44rpx;
			color: rgba(39,40,50,0.88);
			letter-spacing: -1.50rpx;
			font-weight: 600;
			margin-bottom: 20rpx;
		}
		.user-content{
			display: flex;
			align-items: center;
			justify-content: space-between;
			// background-color: red;
			margin-bottom: 40rpx;
			.user-titles{
				display: flex;
				align-items: center;
				flex: 56;
				image{
					width: 80rpx;
					height: 80rpx;
					border-radius: 20rpx;
				}
			}
			.user-wrap{
				flex: 227;
				height: 80rpx;
				.user-name{
					font-family: PingFangSC-Regular;
					font-size: 36rpx;
					color: rgba(39,40,50,0.88);
					letter-spacing: -1.24rpx;
					line-height: 50rpx;
					font-weight: 400;
				}
				.user-email{
					font-family: PingFangSC-Regular;
					font-size: 24rpx;
					color: rgba(39,40,50,0.88);
					letter-spacing: -1.24rpx;
					line-height: 28rpx;
					font-weight: 400;
				}
			}
			.usre-status{
				flex: 60;
				width: 120rpx;
				height: 48rpx;
				background: #FFE431;
				border-radius: 24rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				text{
					width: 70rpx;
					height: 34rpx;
					font-family: PingFangSC-Regular;
					font-size: 24rpx;
					color: rgba(39,40,50);
					letter-spacing: -0.82rpx;
					font-weight: 400;
				}
			}
			.user-status-addfriends{
				flex: 60;
				width: 120rpx;
				height: 48rpx;
				background: rgba(74,170,255,0.10);
				border-radius: 24rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				text{
					width: 70rpx;
					height: 34rpx;
					font-family: PingFangSC-Regular;
					font-size: 24rpx;
					color: rgba(39,40,50);
					letter-spacing: -0.82rpx;
					font-weight: 400;
				}
			}
		}
		
	}
</style>
